<template>
    <div class="dashboard-container">
        <el-button type="primary" icon="el-icon-arrow-left" @click="handleBack" style="margin-bottom: 20px;">返回</el-button>
        <div style="font-size: 30px;text-align: center;">客户详情</div>
        <div class="detail">
            <div class="name">姓名：{{ personData.realName }}</div>
            <div class="phone">电话：{{ personData.phone }}</div>
            <div class="name">地址：{{ personData.address }}</div>
            <div class="name">创建时间：{{ personData.createTime }}</div>
        </div>
        <el-table :data="logList">
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column prop="content" label="跟进内容"></el-table-column>
            <el-table-column prop="nextTime" label="下次跟进时间"></el-table-column>
            <el-table-column prop="createTime" label="跟进时间"></el-table-column>
        </el-table>
        <!-- 分页 -->
        <div style="padding-top:30px; text-align: right;">
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="logParams.pageIndex+1"
            background
            :page-sizes="[10, 20, 30, 40]"
            :page-size="logParams.pageCount"
            layout="total, sizes, prev, pager, next, jumper"
            :total="logTotal">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import { personInfo, personGetLogList } from '@/api/person'
import moment from 'moment'
export default {
   data(){
       return {
           dataId: '',
           personData: {},
           logParams: {
            pageIndex: 0,
            pageCount: 10,
            dataId: ''
           },
           logList: [],
           logTotal: 0
       }
   },
   mounted(){
    this.dataId = this.$router.history.current.query.id;
    this.logParams.dataId = this.$router.history.current.query.id;
    this.getInfo();
    this.getLogList();
   },
   methods: {
        // 返回上一页
       handleBack(){
        this.$router.go(-1)
       },
       async getInfo(){
            let data = await personInfo({ dataId: this.dataId })
            data.data.createTime = moment(data.data.createTime).format('YYYY-MM-DD HH:mm:ss')
            this.personData = data.data;
       },
       // 获取跟进记录列表
       async getLogList(){
        let data = await personGetLogList(this.logParams)
        this.logList = data.data.list.map(item=>{
            item.nextTime = moment(item.nextTime).format('YYYY-MM-DD HH:mm:ss')
            item.createTime = moment(item.createTime).format('YYYY-MM-DD HH:mm:ss')
            return item;
        })
        this.logTotal = data.data.totalCount
       },
       //切换数量
       handleSizeChange(val){
            this.logParams.pageIndex = 0;
            this.logParams.pageCount = val;
            this.getLogList();
        },
        //切换页码
        handleCurrentChange(val){
            this.logParams.pageIndex = val-1;
            this.getLogList();
        }
   }
}
</script>

<style lang="scss" scoped>
.dashboard {
 &-container {
   margin: 30px;
   .detail{
    font-size: 20px;
    line-height: 30px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
   }
 }
}
</style>